import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView, StatusBar, TextInput, Modal, RefreshControl, FlatList,
    Keyboard
} from 'react-native';
import { WebView } from 'react-native-webview'
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";

var elements = [];
var weekday = new Array(7);
weekday[0] = "周末";
weekday[1] = "周一";
weekday[2] = "周二";
weekday[3] = "周三";
weekday[4] = "周四";
weekday[5] = "周五";
weekday[6] = "周六";

export default class FollowDetailed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            deatiled: null,
            beishuInput: "1",//倍数
            betAmount: 0,
            IsFrind: 0,
        };
        this.GameId = null;
        this.DocuID = null;
        this.isFollow = 0;
        this.type_title = {
            1: ['主胜', '平', '主负'],
            2: ['让胜', '让平', '让负'],
            3: ["1:0", "2:0", "2:1", "3:0", "3:1", "3:2", "4:0", "4:1", "4:2", "5:0", "5:1", "5:2", "胜其他", "0:0", "1:1", "2:2", "3:3", "平其他", "0:1", "0:2", "0:3", "0:4", "0:5", "1:2", "1:3", "1:4", "1:5", "2:3", "2:4", "2:5", "负其他"],
            4: ['0', '1', '2', '3', '4', '5', '6', '7+'],
            5: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
        }

        this.keyboardDidHideListener = null;
    }
    static navigationOptions = {
        title: '跟单详情',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {
        //监听键盘隐藏事件
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',
            this.keyboardDidHideHandler.bind(this));
    }

    componentWillUnmount() {
        //卸载键盘隐藏事件监听
        if (this.keyboardDidHideListener != null) {
            this.keyboardDidHideListener.remove();
        }
    }
    //键盘隐藏事件响应
    keyboardDidHideHandler(event) {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
            this.setState({
                beishuInput: parseInt(beishuInput).toString()
            })
        }
    }
    componentDidMount() {
        const { navigation } = this.props;
        this.GameId = navigation.getParam("GameId");
        this.DocuID = navigation.getParam("id");
        this.isFollow = navigation.getParam("isFollow");
        let params = {
            token: Ugame.info.Token,
            id: this.DocuID
        }
        Httpc.get(REQUEST.GetFollowDetail, params, (res) => {
            console.log(res.Data);
            if (res.StatusCode == 1) {
                this.setState({
                    deatiled: res.Data,
                    betAmount: res.Data.singlecoin.toFixed(2),
                    IsFrind: res.Data.IsFrind
                })
            }
        });

    }
    //键盘隐藏事件响应
    keyboardDidHideHandler(event) {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
            this.setState({
                beishuInput: parseInt(beishuInput).toString()
            })
        }
    }
    renderLoadingView() {
        return (
            <View style={Styles.container}>
                <Text>Loading movies...</Text>
            </View>
        );
    }
    _on_reduce_beishuInput = () => {
        if (this.state.beishuInput == '' || Number(this.state.beishuInput) <= 1) {
            return;
        }
        let beishuInput = Number(this.state.beishuInput);
        beishuInput--;
        this.setState({
            beishuInput: beishuInput.toString(),
            betAmount: (beishuInput * this.state.deatiled.singlecoin).toFixed(2)
        });
    }
    _on_increase_beishuInput = () => {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || Number(beishuInput) < 1) {
            beishuInput = 1;
        }
        beishuInput++;
        this.setState({
            beishuInput: beishuInput.toString(),
            betAmount: (beishuInput * this.state.deatiled.singlecoin).toFixed(2)
        });

    }
    _on_change_beishuInput = (beishuInput) => {
        this.setState({
            beishuInput: beishuInput.toString(),
            betAmount: (beishuInput * this.state.deatiled.singlecoin).toFixed(2)
        });
    }
    _do_bet_order = () => {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || isNaN(Number(beishuInput))) {
            beishuInput = 1;
            this.setState({ beishuInput: "1" });
        }
        let postBetData = {
            id: this.GameId,
            DocuID: this.DocuID,
            Mult: Number(beishuInput),
            singlecoin: this.state.deatiled.singlecoin
        }
        this.props.navigation.navigate('BetOrder', {
            type: 2,
            postBetData: postBetData,
            game_model: "FootballGame",
        })
    }
    _on_FollowConcern = () => {
        let { deatiled, IsFrind } = this.state;
        let url = null;
        if (deatiled.IsFrind == 1) {
            url = REQUEST.DelFollowConcern;
        } else {
            url = REQUEST.AddFollowConcern;
        }
        let params = {
            token: Ugame.info.Token,
            userid: deatiled.userid
        }
        Httpc.get(url, params, (res) => {
            this.do_toast(res.Message, 500, () => {

            });
            if (res.StatusCode == 1) {
                IsFrind = IsFrind == 1 ? 0 : 1;
                this.setState({
                    IsFrind: IsFrind
                })
            }
        });

    }
    _createUserItem = ({ item, index }) => {
        let rank = null;
        let rank_css = {};
        if (index == 0) {
            rank = require('../../image/js_img_rank_followorder_one.png');
            rank_css = { width: 15, height: 15, borderRadius: 30, borderColor: '#f6ce07', borderWidth: 2 };
        }
        if (index == 1) {
            rank = require('../../image/js_img_rank_followorder_two.png');
            rank_css = { width: 15, height: 15, borderRadius: 30, borderColor: '#d8d8d8', borderWidth: 2 };
        }
        if (index == 2) {
            rank = require('../../image/js_img_rank_followorder_three.png');
            rank_css = { width: 15, height: 15, borderRadius: 30, borderColor: '#88683c', borderWidth: 2 };
        }
        let deatiled_head = require('../../image/js_img_user_head.png');
        if (!!item.head) {
            deatiled_head = { uri: 'data:image/png;base64,' + item.head };
        }
        return (
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginBottom: 10 }}>
                <Text style={{ color: '#333' }}>{index + 1}</Text>
                <View style={{ marginLeft: 10, marginTop: -10, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 40 }}>
                    {index < 3 ?
                        <Image resizeMode="cover" style={{ top: 8, left: -12, width: 15, height: 15 }} source={rank} /> :
                        null
                    }
                    <Image resizeMode="cover" style={{ width: 30, height: 30, borderRadius: 30 }} source={deatiled_head} />
                </View>
                <Text style={{ color: '#333333', marginLeft: 10 }}>{item.nick.charAt(0) + ("*".repeat(item.nick.length - 1))}</Text>
                <Text style={{ position: 'absolute', right: 0, alignItems: 'center' }}>{item.Coin}</Text>
            </View>
        );
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    _onbeishuInputChangeText = (beishuInput) => {
        if (beishuInput == '' || Number(beishuInput) == 0 || isNaN(Number(beishuInput))) {
            beishuInput = "";
        } else {
            beishuInput = parseInt(beishuInput).toString()
        }
        this.setState({
            beishuInput: beishuInput,
            betAmount: ((beishuInput == "" ? 1 : Number(beishuInput)) * this.state.deatiled.singlecoin).toFixed(2)
        })
    }
    renderFollowOpt = () => {
        let { beishuInput, betAmount } = this.state;
        return (
            <View style={{ position: 'absolute', bottom: 0, width: width, height: 90, backgroundColor: '#ffffff', borderColor: '#f2f2f2', borderTopWidth: 0.5 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width, height: 40 }}>
                    <Text style={{ color: '#666666' }}>购</Text>
                    <View style={Styles.beishu_input}>
                        <TouchableOpacity onPress={() => this._on_reduce_beishuInput()}>
                            <View style={{ padding: 5 }}>
                                <Image resizeMode="cover" source={require('../../image/js_img_icon_subtract.png')} />
                            </View>
                        </TouchableOpacity>
                        <TextInput
                            style={{ height: 25, padding: 0, lineHeight: 25, textAlign: 'center', width: 50, borderLeftWidth: 1, borderRightWidth: 0.5, borderColor: '#cccccc' }}
                            value={this.state.beishuInput}
                            keyboardType='numeric'
                            placeholder={"1"}
                            onChangeText={(beishuInput) => this._onbeishuInputChangeText(beishuInput)}
                        />
                        <TouchableOpacity onPress={() => this._on_increase_beishuInput()}>
                            <View style={{ padding: 5 }}>
                                <Image resizeMode="cover" source={require('../../image/js_img_sub_icon_add.png')} />
                            </View>
                        </TouchableOpacity>
                    </View>
                    <Text style={{ color: '#666666' }}>倍</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width, height: 50, borderColor: '#f2f2f2', borderTopWidth: 0.5 }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width - 190, height: 50 }}>
                        <TouchableOpacity onPress={() => this._on_change_beishuInput(10)}>
                            <Text style={Number(beishuInput) == 10 ? Styles.tab_on : Styles.tab}>10倍</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this._on_change_beishuInput(20)}>
                            <Text style={Number(beishuInput) == 20 ? Styles.tab_on : Styles.tab}>20倍</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this._on_change_beishuInput(50)}>
                            <Text style={Number(beishuInput) == 50 ? Styles.tab_on : Styles.tab}>50倍</Text>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity onPress={() => this._do_bet_order()}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 190, height: 50, backgroundColor: '#d0162e' }}>
                            <Text style={{ color: '#ffffff' }}>立即参与</Text>
                            <Text style={{ color: '#ffffff' }}>(￥{betAmount})</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
    _createGameRsItem = ({ item }) => {
        let { deatiled } = this.state;
        if (deatiled.isshow === 0) {
            var str = item.endtime.substr(0, 16); // 日期字符串
            str = str.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
            var date = new Date(str); // 构造一个日期型数据，值为传入的字符串
            if (new Date().getTime() < date.getTime()) {
                return (
                    <View style={{ width: width - 24, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 60, borderColor: '#e9e9e9', borderTopWidth: 0.5 }}>
                        <Text style={{ color: '#666666' }}>截止时间：{item.endtime.substr(0, 16)}</Text>
                    </View>
                );
            }
        }
        return (
            <View style={{ width: width - 24, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: 60, borderColor: '#e9e9e9', borderTopWidth: 0.5 }}>
                <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 70, height: 60, borderColor: '#e9e9e9', borderRightWidth: 0.5 }}>
                    <Text style={{ fontSize: 12, color: '#666666', }}>{Utils.timestampToWeekday(item.endtime)} {item.sortNum.slice(-3)}</Text>
                    <Text style={{ fontSize: 12, color: '#666666' }}>{item.l_cn_abbr}</Text>
                    <Text style={{ fontSize: 12, color: '#666666' }}>{item.endtime.substr(11, 5)}截止</Text>
                </View>
                <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={{ fontSize: 12, color: '#666666' }}>{item.a_cn_abbr}</Text>
                    <Text style={{ fontSize: 12, color: '#666666' }}>{item.fs_h}:{item.fs_a}</Text>
                    <Text style={{ fontSize: 12, color: '#666666' }}>{item.h_cn_abbr}</Text>
                </View>
                <View style={{ flexDirection: 'column', width: 105, justifyContent: 'center', alignItems: 'center', height: 60, borderColor: '#e9e9e9', borderLeftWidth: 0.5 }}>
                    {item.IsWin === 0 ?
                        <Text style={{ fontSize: 12, color: '#666666' }}>{this.type_title[item.Typeid][item.BetNo]}</Text> :
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>{this.type_title[item.Typeid][item.BetNo]}</Text>
                    }
                </View>
            </View>
        );
    }
    render() {
        let { deatiled, beishuInput, betAmount, IsFrind } = this.state;
        if (deatiled == null) {
            return this.renderLoadingView();
        }
        let deatiled_head = require('../../image/js_img_user_head.png');
        if (!!deatiled.head) {
            deatiled_head = { uri: 'data:image/png;base64,' + deatiled.head };
        }
        let GameRs = deatiled.GameRs;
        let endtimeState = false;
        let betEndTime = null;

        for (let i = 0; i < GameRs.length; i++) {
            if (deatiled.isshow === 0) {
                var str = GameRs[i].endtime.substr(0, 16); // 日期字符串
                str = str.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
                var date = new Date(str); // 构造一个日期型数据，值为传入的字符串
                if (new Date().getTime() < date.getTime()) {
                    endtimeState = true;
                    betEndTime = GameRs[i].endtime.substr(0, 16);
                    break;
                }
            }
        }
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView style={{ width: width, height: height }}>
                    <View style={{ width: width, backgroundColor: '#ffffff' }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 24, height: 67, marginLeft: 12, marginTop: 12, paddingBottom: 12, borderColor: '#f2f2f2', borderBottomWidth: 0.5 }}>
                            <Image resizeMode="cover" style={{ width: 44, height: 44, borderRadius: 44 }} source={deatiled_head} />
                            <TouchableOpacity onPress={() => this._on_newsDeatiled(item)}>
                                <View style={{ marginLeft: 8 }}>
                                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                        <Text style={{ color: '#333333' }}>{deatiled.nick}</Text>
                                    </View>
                                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                        <Text style={{ fontSize: 12, color: '#999999' }}>粉丝:</Text>
                                        <Text style={{ fontSize: 12, color: '#666666' }}>{deatiled.Fans}</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>

                            <View style={{ position: 'absolute', right: 0, alignItems: 'center' }}>
                                <TouchableOpacity onPress={() => this._on_FollowConcern()}>
                                    <Text style={IsFrind == 0 ? Styles.guanzhu : Styles.guanzhu_on}>+ 关注</Text>
                                </TouchableOpacity>
                            </View>

                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 20, paddingBottom: 15 }}>
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 3 }}>
                                <Text style={{ color: '#d0162e' }}>{(deatiled.a / 100).toFixed(2)}%</Text>
                                <Text style={{ fontSize: 12, color: '#999999' }}>近七天命中率</Text>
                            </View>
                            {/* <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 3 }}>
                                <Text style={{ color: '#d0162e' }}>{(deatiled.b / 100).toFixed(2)}%</Text>
                                <Text style={{ fontSize: 12, color: '#999999' }}>近七天盈利率</Text>
                            </View> */}
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 3 }}>
                                <Text style={{ color: '#d0162e' }}>{(deatiled.c / 100).toFixed(2)}%</Text>
                                <Text style={{ fontSize: 12, color: '#999999' }}>近七天带红人数</Text>
                            </View>
                        </View>

                    </View>
                    <View style={{ width: width, marginTop: 20, backgroundColor: '#ffffff', padding: 12 }}>
                        <Text style={{ color: '#333333', lineHeight: 20, }}>{deatiled.metro}</Text>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingTop: 12, paddingBottom: 12, backgroundColor: '#ffffff', borderColor: '#f2f2f2', borderBottomWidth: 0.5 }}>
                            <Text>方案内容</Text>
                            {this.isFollow == 1 ? null : <Text style={{ color: '#666666', paddingLeft: 10, fontSize: 12 }}>{deatiled.title}</Text>}
                            <Text style={{ color: '#666666', paddingLeft: 10, fontSize: 12 }}>{deatiled.ctime.substr(5, 11)}</Text>
                            <Text style={{ position: 'absolute', right: 0, alignItems: 'center', color: '#666666', fontSize: 12 }}>截止后可见</Text>
                        </View>
                        {this.isFollow == 1 ?
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 70 }}>
                                <Text style={{ color: '#b6b6b6', fontWeight: 'bold', fontSize: 16 }}>截止日期：{deatiled.ctime.substr(0, 10)}</Text>
                            </View> :
                            <View style={{ borderColor: '#e9e9e9', borderWidth: 0.5, width: width - 24 }}>
                                <View style={{ width: width - 24, height: 30, backgroundColor: '#f7f7f7', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                                    <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 70, height: 30, borderRightWidth: 0.5, borderColor: '#e9e9e9' }}>
                                        <Text style={{ fontSize: 12, color: '#666666', }}>场次</Text>
                                    </View>
                                    <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                        <Text style={{ fontSize: 12, color: '#666666' }}>主队vs客队</Text>
                                    </View>
                                    <View style={{ width: 105, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 30, borderLeftWidth: 0.5, borderColor: '#e9e9e9' }}>
                                        <Text style={{ fontSize: 12, color: '#666666' }}>投注内容</Text>
                                    </View>
                                </View>
                                {endtimeState ?
                                    <View style={{ width: width - 24, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 60, borderColor: '#e9e9e9', borderTopWidth: 0.5 }}>
                                        <Text style={{ color: '#666666' }}>截止时间：{betEndTime}</Text>
                                    </View> :
                                    <FlatList
                                        data={deatiled.GameRs}
                                        keyExtractor={(item, index) => index.toString()}
                                        renderItem={this._createGameRsItem}
                                    />
                                }


                            </View>
                        }
                    </View>
                    <View style={{ width: width, marginTop: 10, backgroundColor: '#ffffff', padding: 12 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 12, borderBottomWidth: 0.5, borderColor: '#f2f2f2' }}>
                            <Text>{Ugame.gmlist[this.GameId].Name}胜平负</Text>
                            <Text style={{ borderColor: '#d0162e', borderWidth: 0.5, paddingLeft: 10, paddingRight: 10, paddingTop: 2, paddingBottom: 2, borderRadius: 20, color: '#d0162e' }}>佣金{Math.floor(deatiled.commis * 100)}%</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width - 24, height: 70 }}>
                            <View style={{ width: (width - 24) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ color: '#333333' }}>{deatiled.ordercoin}</Text>
                                <Text style={{ color: '#999999', fontSize: 12 }}>订单总额</Text>
                            </View>
                            <View style={{ width: (width - 24) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ color: '#333333' }}>{deatiled.selfcoin}</Text>
                                <Text style={{ color: '#999999', fontSize: 12 }}>自购金额</Text>
                            </View>
                            <View style={{ width: (width - 24) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ color: '#d0162e' }}>{deatiled.singlecoin}</Text>
                                <Text style={{ color: '#999999', fontSize: 12 }}>单倍金额</Text>
                            </View>
                            <View style={{ width: (width - 24) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ color: '#333333' }}>{deatiled.follownum}</Text>
                                <Text style={{ color: '#999999', fontSize: 12 }}>跟单人数</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{ width: width, marginTop: 10, backgroundColor: '#ffffff', padding: 12 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingBottom: 12 }}>
                            <Text style={{ fontSize: 12, color: '#999999' }}>排名</Text>
                            <Text style={{ fontSize: 12, color: '#999999', paddingLeft: 10 }}>用户名</Text>
                            <Text style={{ fontSize: 12, color: '#999999', position: 'absolute', right: 0, alignItems: 'center' }}>方案金额</Text>
                        </View>
                        <FlatList
                            data={deatiled.Ulist}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this._createUserItem}
                        />
                    </View>
                    {this.isFollow == 1 ? <View style={{ width: width, height: 100, backgroundColor: '#f2f2f2' }}></View> : null}
                </ScrollView>
                {this.isFollow == 1 ? this.renderFollowOpt() : null}
                {this.toast()}
            </View>
        );
    }
}
